<template>
  <div class="right-select-event">
    <div class="title">
      <i class="jy-icon-arrow-left" @click.stop="onHiddenSelectEvent($event)"></i>选择事件
    </div>
    <div class="edit-handles-con margin-top-50 ">
      <el-divider content-position="center">非微博事件</el-divider>
      <p class="margin-left-right-16">控件类：</p>
      <ul>
        <li v-for="(item, index) in events.control" :key="index" @click.stop="onAddEvent(item)" @mouseover="onHover(item)" @mouseout="onOut(item)">
          <i :class="item.isHover ? EVENT_HOVER_WEB_TYPES[item.type].classStrHover : EVENT_HOVER_WEB_TYPES[item.type].classStr"></i>
          <p>{{EVENT_HOVER_WEB_TYPES[item.type].label}}</p>
        </li>
      </ul>
      <p class="margin-left-right-16">链接类：</p>
      <ul>
        <li v-for="(item, index) in events.link" :key="index" @click.stop="onAddEvent(item)" @mouseover="onHover(item)" @mouseout="onOut(item)">
          <i :class="item.isHover ? EVENT_HOVER_WEB_TYPES[item.type].classStrHover : EVENT_HOVER_WEB_TYPES[item.type].classStr"></i>
          <p>{{EVENT_HOVER_WEB_TYPES[item.type].label}}</p>
        </li>
      </ul>
     <el-divider content-position="center">微博事件</el-divider>
      <ul>
        <li v-for="(item, index) in events.wb" :key="index" @click.stop="onAddEvent(item)" @mouseover="onHover(item)" @mouseout="onOut(item)">
          <i :class="item.isHover ? EVENT_HOVER_WEB_TYPES[item.type].classStrHover : EVENT_HOVER_WEB_TYPES[item.type].classStr"></i>
          <p>{{EVENT_HOVER_WEB_TYPES[item.type].label}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { EVENT_TYPES } from '@/store/models/events-data'
import { EVENT_HOVER_WEB_TYPES } from '@/const/web/'
import { EVENT_HOVER_TYPES } from '@/const/'
import { EventBus } from '@/utils/'
import { useWebSiteStore } from '@/store/web/site'
import { showAlert } from '@/components/utils/'

const useWebComponent = useWebComponentStore()
const useWebSite = useWebSiteStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
const events = _.cloneDeep(EVENT_TYPES)

const onAddEvent = (event: IEvent) => {
  if(event.type == EVENT_HOVER_TYPES.layer && useWebSite.getPopPages.length <= 0) {
    showAlert("您还没有弹出图层呢，点击左侧面板的【弹层】旁边的【+】按钮创建一个吧")
    return
  }
  const type = useWebComponent.selectEvent.type
  if(type.length > 0){
    useWebComponent.deleteEvent({ type,  controlId: event.controlId })
  }
  useWebComponent.addEvent(event)
  useWebComponent.changeSelectEventPlane({ isActive: false, type })
}
const onHiddenSelectEvent = (e: any) => {
  e.stopPropagation()
  e.preventDefault()
  useWebComponent.changeSelectEventPlane({ isActive: false, type:'' })
}
const onHover = (event: IEvent) => {
  event.isHover = true
}
const onOut = (event: IEvent) => {
  event.isHover = false
}
</script>

<style lang="scss">
.right-select-event {
  .title {
    background-color:var(--color-blue);
    padding: 10px;
    color: #FFFFFF;
  }
  .jy-icon-arrow-left {
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
  }
  ul{
    padding: 0 16px;
  }
  li{
    display: inline-block;
    font-size: 12px;
    margin: 10px;
    text-align: center;
    width: 60px;

    p{
      margin-top: 4px;
    }

    &:hover{
      color: var(--color-blue);
    }
  }
}
</style>
